<template>
    <div>
        <van-swipe-cell :before-close="beforeClose" :stop-propagation=true>
            <van-card
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品标题"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <template #right>
                <van-button
                    square
                    text="删除"
                    type="danger"
                    class="delete-button"
                />
            </template>
        </van-swipe-cell>
        <HelloWorld :msg="userName"></HelloWorld>
        <good-detail goodsName="apple"></good-detail>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import GoodDetail from '../components/GoodDetail.vue';
export default {
  data() {
    return {
      userName: 'lucio'
    }
  },
  components: { GoodDetail },
  methods: {
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？',
          }).then(() => {
            instance.close();
          });
          break;
      }
    },
  },
};
</script>

<style scoped>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>
